
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="https://blog.csdn.net/qq_44273429/article/details/120263267"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="report" content='{"pid": "blog", "spm":"1001.2101"}'>
    <meta name="referrer" content="always">
    <meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="alternate" media="handheld" href="#" />
    <meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848">
    <meta name="applicable-device" content="pc">
    <link  href="https://g.csdnimg.cn/static/logo/favicon32.ico"  rel="shortcut icon" type="image/x-icon" />
    <title>❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️_努力是为了站在万人中央，成为别人的光-CSDN博客</title>
    <script>
      (function(){ 
        var el = document.createElement("script"); 
        el.src = "https://s3a.pstatp.com/toutiao/push.js?1abfa13dfe74d72d41d83c86d240de427e7cac50c51ead53b2e79d40c7952a23ed7716d05b4a0f683a653eab3e214672511de2457e74e99286eb2c33f4428830"; 
        el.id = "ttzz"; 
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(el, s);
      })(window)
    </script>
        <meta name="keywords" content="❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️">
        <meta name="csdn-baidu-search"  content='{"autorun":true,"install":true,"keyword":"❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️"}'>
    <meta name="description" content="直接跳到末尾  获取完整源码今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的，您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️???? 在线演示地址???? 完整代码结构???? home-section 首页部分???">
    <script src="//g.csdnimg.cn/tingyun/1.8.5/blog.js" type='text/javascript'></script>
        <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/css/detail_enter-049c37bb43.min.css">
    <style>
        #content_views pre{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none; 
            user-select: none; 
        }
        #content_views pre code{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none; 
            user-select: none; 
        }
    </style>
    <script type="application/ld+json">{"@context":"https://ziyuan.baidu.com/contexts/cambrian.jsonld","@id":"https://blog.csdn.net/qq_44273429/article/details/120263267","appid":"1638831770136827","pubDate":"2021-09-13T11:11:11","title":"❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️_努力是为了站在万人中央，成为别人的光-CSDN博客","upDate":"2021-09-13T15:44:35"}</script>
        <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-eyes/skin-eyes-2a19b3df93.min.css">
    <script src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var isCorporate = false;//注释删除enterprise
        var username =  "qq_44273429";
        var skinImg = "white";
        var blog_address = "https://haiyong.blog.csdn.net";
        var currentUserName = "";
        var isOwner = false;
        var loginUrl = "http://passport.csdn.net/account/login?from=https://blog.csdn.net/qq_44273429/article/details/120263267";
        var blogUrl = "https://blog.csdn.net/";
        var avatar = "https://profile.csdnimg.cn/9/F/B/3_qq_44273429";
        var articleTitle = "❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️";
        var articleDesc = "直接跳到末尾  获取完整源码今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的，您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️???? 在线演示地址???? 完整代码结构???? home-section 首页部分???";
        var articleTitles = "❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️_努力是为了站在万人中央，成为别人的光-CSDN博客";
        var nickName = "海拥✘";
        var articleDetailUrl = "https://haiyong.blog.csdn.net/article/details/120263267";
        if(window.location.host.split('.').length == 3) {
            blog_address = blogUrl + username;
        }
        var skinStatus = "Black";
        var blogStaticHost = "https://csdnimg.cn/release/blogv2/"
    </script>
        <meta name="toolbar" content='{"type":"1"}'>
        <script>
            window.csdn = window.csdn ? window.csdn : {};
            window.csdn.toolbarIsBlack = true;
            window.csdn.sideToolbar = {
                options: {
                    theme : "black"
                }
            }
        </script>
    <script src="https://g.csdnimg.cn/??fixed-sidebar/1.1.6/fixed-sidebar.js" type="text/javascript"></script>
    <script src='//g.csdnimg.cn/common/csdn-report/report.js' type='text/javascript'></script>
    <link rel="stylesheet" type="text/css" href="https://csdnimg.cn/public/sandalstrap/1.4/css/sandalstrap.min.css">
    <style>
        .MathJax, .MathJax_Message, .MathJax_Preview{
            display: none
        }
    </style>
    <script src="https://dup.baidustatic.com/js/ds.js"></script>
</head>
<body class="nodata " style="">
        <script>
            var toolbarSearchExt = '{"landingWord":[],"queryWord":"","tag":["css","html","html5","音乐播放器"],"title":"❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️"}';
        </script>
    <script src="https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar.js" type="text/javascript"></script>
    <script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
    </script>
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/pc/css/blog_code-01256533b5.min.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/chart-3456820cac.css" />
<div class="main_father clearfix d-flex justify-content-center" style="height:100%;"> 
    <div class="container clearfix" id="mainBox">
        <main>
<script type="text/javascript">
    function getQueryString(name) {   
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象  
      var r = window.location.search.substr(1).match(reg);  //匹配目标参数
      if( r != null ) return decodeURIComponent( r[2] ); return '';   
    }
    function stripscript(s){ 
      var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]") 
      var rs = ""; 
      for (var i = 0; i < s.length; i++) { 
        rs = rs+s.substr(i, 1).replace(pattern, ''); 
      } 
      return rs; 
    }
    var blogHotWords = stripscript(getQueryString('utm_term')).length > 1 ? stripscript(getQueryString('utm_term')) : ''
</script>
<div class="blog-content-box">
        <div class="article-header-box">
        <div class="article-header">
            <div class="article-title-box">
                <h1 class="title-article" id="articleContentId">❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️</h1>
            </div>
            <div class="article-info-box">
                <div class="article-bar-top">
                    <img class="article-type-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" alt="">
                    <div class="bar-content">
                        <span class="c-gray">置顶</span>
                    <a class="follow-nickName vip-name" href="https://haiyong.blog.csdn.net" target="_blank" rel="noopener">海拥✘</a>
                    <span class="time">2021-09-13 15:44:35</span>
                    <img class="article-read-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes.png" alt="">
                    <span class="read-count">12509</span>
                    <a id="blog_detail_zk_collection" class="un-collection" data-report-click='{"mod":"popu_823","spm":"1001.2101.3001.4232","ab":"new"}'>
                        <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect.png" alt="">
                        <img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive.png" alt="">
                        <span class="name">收藏</span>
                        <span class="get-collection">
                            506
                        </span>
                    </a>
                    </div>
                </div>
                <div class="blog-tags-box">
                    <div class="tags-box artic-tag-box">
                            <span class="label">分类专栏：</span>
                                <a class="tag-link" href="https://blog.csdn.net/qq_44273429/category_11289568.html" target="_blank" rel="noopener">新原力计划</a>
                                <a class="tag-link" href="https://blog.csdn.net/qq_44273429/category_10232485.html" target="_blank" rel="noopener">web前端(免费)</a>
                                <a class="tag-link" href="https://blog.csdn.net/qq_44273429/category_9951082.html" target="_blank" rel="noopener">好玩</a>
                            <span class="label">文章标签：</span>
                                <a data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"css","ab":"new"}' class="tag-link" href="https://www.csdn.net/tags/MtTaEg0sMzgzMjItYmxvZwO0O0OO0O0O.html" target="_blank" rel="noopener">css</a>
                                <a data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"html","ab":"new"}' class="tag-link" href="https://www.csdn.net/tags/MtTaEg0sMzA4NjQtYmxvZwO0O0OO0O0O.html" target="_blank" rel="noopener">html</a>
                                <a data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"html5","ab":"new"}' class="tag-link" href="https://www.csdn.net/tags/OtDaMgzsMzI0LWJsb2cO0O0O.html" target="_blank" rel="noopener">html5</a>
                                <a data-report-click='{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"音乐播放器","ab":"new"}' class="tag-link" href="https://www.csdn.net/tags/MtTaEg3sMzkwMTktYmxvZwO0O0OO0O0O.html" target="_blank" rel="noopener">音乐播放器</a>
                            <a class="origin-plan-box" data-report-click='{"spm":"1001.2101.3001.5794"}' href="https://marketing.csdn.net/p/55d59e00e66e4d3796149b096ae7c810" target="_blank">
                                <img src="https://csdnimg.cn/release/blogv2/dist/components/img/originPlan.png" alt=""><span class="origin-plan-name">原力计划</span>
                            </a>
                    </div>
                </div>
                <div class="slide-content-box">
                    <div class="article-copyright">
                        <div class="creativecommons">
                            版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
                        </div>
                        <div class="article-source-link">
                            本文链接：<a href="https://blog.csdn.net/qq_44273429/article/details/120263267" target="_blank">https://blog.csdn.net/qq_44273429/article/details/120263267</a>
                        </div>
                    </div>
                </div>
                <div class="operating">
                    <a class="href-article-edit slide-toggle">版权</a>
                </div>
            </div>
        </div>
    </div>
        <div id="blogColumnPayAdvert">
            <div class="column-group">
                <div class="column-group-item column-group0 ">
                    <div class="item-l">
                        <a class="item-target" href="https://blog.csdn.net/qq_44273429/category_11289568.html" target="_blank" title="新原力计划"
                        data-report-view='{"spm":"1001.2101.3001.6332"}'
                        data-report-click='{"spm":"1001.2101.3001.6332"}'>
                            <img class="item-target" src="https://img-blog.csdnimg.cn/20210816113410370.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
                            <span class="title item-target">新原力计划</span>
                        </a>
                        <span class="dec more">同时被 3 个专栏收录<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newArrowDown1Black.png" alt=""></span>
                    </div>
                    <div class="item-m">
                        <span>6 篇文章</span>
                        <span>10 订阅</span>
                    </div>
                    <div class="item-r">
                            <a class="item-target article-column-bt articleColumnFreeBt" data-id="11289568">订阅专栏</a>
                    </div>
                </div>
                <div class="column-group-item column-group1 ">
                    <div class="item-l">
                        <a class="item-target" href="https://blog.csdn.net/qq_44273429/category_10232485.html" target="_blank" title="web前端(免费)"
                        data-report-view='{"spm":"1001.2101.3001.6332"}'
                        data-report-click='{"spm":"1001.2101.3001.6332"}'>
                            <img class="item-target" src="https://img-blog.csdnimg.cn/20210524160504644.png?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
                            <span class="title item-target">web前端(免费)</span>
                        </a>
                    </div>
                    <div class="item-m">
                        <span>46 篇文章</span>
                        <span>55 订阅</span>
                    </div>
                    <div class="item-r">
                            <a class="item-target article-column-bt articleColumnFreeBt" data-id="10232485">订阅专栏</a>
                    </div>
                </div>
                <div class="column-group-item column-group2 ">
                    <div class="item-l">
                        <a class="item-target" href="https://blog.csdn.net/qq_44273429/category_9951082.html" target="_blank" title="好玩"
                        data-report-view='{"spm":"1001.2101.3001.6332"}'
                        data-report-click='{"spm":"1001.2101.3001.6332"}'>
                            <img class="item-target" src="https://img-blog.csdnimg.cn/20210524161613272.png?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
                            <span class="title item-target">好玩</span>
                        </a>
                    </div>
                    <div class="item-m">
                        <span>30 篇文章</span>
                        <span>6 订阅</span>
                    </div>
                    <div class="item-r">
                            <a class="item-target article-column-bt articleColumnFreeBt" data-id="9951082">订阅专栏</a>
                    </div>
                </div>
            </div>
        </div>
    <article class="baidu_pl">
        <div id="article_content" class="article_content clearfix">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css">
                <div id="content_views" class="markdown_views prism-tomorrow-night">
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                    <p><img src="https://img-blog.csdnimg.cn/f56835370056479e8cd80298ff892904.png#pic_center" alt="在这里插入图片描述" /><br /> <a href="#jump99"><font size="5" color="#03a9f4"><b><u>直接跳到末尾</u></b></font></a> <strong>获取完整源码</strong></p> 
<blockquote> 
 <p><font color="#B8860B"><strong>今天我将带着大家使用 HTML、CSS 和 JS创建 <a href="http://haiyong.site/yinyue">音乐播放器</a>&#xff0c;没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块&#xff0c;也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的&#xff0c;您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。</strong></font></p> 
</blockquote> 
<p></p>
<div class="toc">
 <h3>❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️</h3>
 <ul><li><ul><li><a href="#__7">&#x1f3aa; 在线演示地址</a></li><li><a href="#__11">&#x1f947; 完整代码结构</a></li><li><a href="#_homesection__38">&#x1f3af; home-section 首页部分</a></li><li><a href="#_playersection__241">&#x1f356; player-section 播放器部分</a></li><li><a href="#_playlistsection__479">&#x1f3c6; playlist-section 播放列表部分</a></li><li><a href="#_navigation__577">✨ navigation 导航部分</a></li><li><a href="#_music__622">&#x1f3b6; music 音乐部分</a></li><li><a href="#_wuhu____803">&#x1f6ec; wuhu ! 起飞 !</a></li><li><a href="#__819">&#x1f3a1; 完整源码下载</a></li></ul>
 </li></ul>
</div>
<p></p> 
<h2><a id="__7"></a>&#x1f3aa; 在线演示地址</h2> 
<p><a href="http://haiyong.site/yinyue">http://haiyong.site/yinyue</a></p> 
<h2><a id="__11"></a>&#x1f947; 完整代码结构</h2> 
<p>在我们开始编写代码之前。虽然它不是 Nodejs 应用程序&#xff0c;但我们至少应该看到它的文件夹结构。</p> 
<p><img src="https://img-blog.csdnimg.cn/d8ac58504c0d46e9a354752bb96a0b84.png" alt="在这里插入图片描述" /><br /> 你可以看到我们有一个data.js文件&#xff0c;该文件包含我们的音乐相关数据。你可以在下面看到。</p> 
<pre><code class="prism language-js"><span class="token keyword">let</span> songs <span class="token operator">&#61;</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{<!-- --></span>
        name<span class="token operator">:</span> <span class="token string">&#39;song 1&#39;</span><span class="token punctuation">,</span>
        path<span class="token operator">:</span> <span class="token string">&#39;assets/musics/Song 1.mp3&#39;</span><span class="token punctuation">,</span>
        artist<span class="token operator">:</span> <span class="token string">&#39;artist 1&#39;</span><span class="token punctuation">,</span>
        cover<span class="token operator">:</span> <span class="token string">&#39;assets/images/cover 1.png&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{<!-- --></span>
        name<span class="token operator">:</span> <span class="token string">&#39;song 2&#39;</span><span class="token punctuation">,</span>
        path<span class="token operator">:</span> <span class="token string">&#39;assets/musics/Song 2.mp3&#39;</span><span class="token punctuation">,</span>
        artist<span class="token operator">:</span> <span class="token string">&#39;artist 2&#39;</span><span class="token punctuation">,</span>
        cover<span class="token operator">:</span> <span class="token string">&#39;assets/images/cover 2.png&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 剩下8首歌曲格式同上</span>
<span class="token punctuation">]</span>
</code></pre> 
<p>我们在这里存储了音乐相关数据。</p> 
<p>然后现在让我们对主页部分进行编码。</p> 
<h2><a id="_homesection__38"></a>&#x1f3af; home-section 首页部分</h2> 
<p>打开index.html和内部从编写基本的 HTML 结构开始。还链接style.css和两个 JS 文件。记得data.js在app.js. 否则我们将无法访问数据。</p> 
<p>完成链接所有文件后&#xff0c;让我们创建第一件事。图像轮播。内部身体标签代码这个。</p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>home-section<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>carousel<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 1.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>active<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 2.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 3.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 4.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 5.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>注意 - 将旋转木马包裹在<code>home-section</code>元素内。</p> 
<pre><code class="prism language-css"><span class="token atrule"><span class="token rule">&#64;import</span> <span class="token function">url</span><span class="token punctuation">(</span>&#39;<span class="token property">https</span><span class="token punctuation">:</span>//fonts.googleapis.com/css2?family&#61;<span class="token property">Roboto</span><span class="token punctuation">:</span>wght<span class="token atrule"><span class="token rule">&#64;300</span><span class="token punctuation">;</span></span></span>400<span class="token punctuation">;</span>500<span class="token punctuation">;</span>700<span class="token punctuation">;</span>900&amp;display&#61;swap&#39;<span class="token punctuation">)</span><span class="token selector">;

*</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">:root</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">--background</span><span class="token punctuation">:</span> #141414<span class="token punctuation">;</span>
    <span class="token property">--text-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token property">--primary-color</span><span class="token punctuation">:</span> #63ff69<span class="token punctuation">;</span>
    <span class="token property">--secondary-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
    <span class="token property">--alpha-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">--shadow</span><span class="token punctuation">:</span> 0 15px 40px <span class="token function">var</span><span class="token punctuation">(</span>--alpha-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">html</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">body</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
    <span class="token property">max-width</span><span class="token punctuation">:</span> 375px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&#39;roboto&#39;</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">::-webkit-scrollbar</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.home-section</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* carousel */</span>

<span class="token selector">.carousel</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.carousel img</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.carousel img.active</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>您可以看到我们在这里使用了 CSS 变量&#xff0c;因此我们将来可以轻松更改此音乐播放器主题。</p> 
<p><strong>输出</strong><br /> <img src="https://img-blog.csdnimg.cn/5e02e4835274417f9ff0ea5ca76c731a.png" alt="在这里插入图片描述" /></p> 
<p>请注意&#xff0c;这是为移动视图设计的&#xff0c;这就是为什么我使用 chrome 检查器以移动尺寸查看它的原因。</p> 
<p>现在创建水平滚动播放列表。放在<code>home-section</code>里面</p> 
<p><strong>HTML</strong></p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>heading<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>最近播放<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlists-group<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 9.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-img<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-name<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>华语热歌<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 2.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-img<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-name<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>古风戏腔<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	//&#43;3 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>heading<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>根据你的喜好<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlists-group<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 12.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-img<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-name<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>失恋回忆<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 12.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-img<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist-card-name<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>经典老歌<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	//&#43;3 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p><strong>CSS</strong></p> 
<pre><code class="prism language-css"><span class="token selector">.heading</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 30px 0 10px<span class="token punctuation">;</span>
    <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* playlists card */</span>

<span class="token selector">.playlists-group</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">min-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
    <span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.playlist-card</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">flex</span><span class="token punctuation">:</span> 0 0 auto<span class="token punctuation">;</span>
    <span class="token property">max-width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.playlist-card-img</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
    <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.playlist-card-name</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> justify<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>输出</strong><br /> <img src="https://img-blog.csdnimg.cn/975b293d1475474a896ea93802835e18.png" alt="在这里插入图片描述" width="200" /></p> 
<p>我们完成了<code>home section</code>。但是我们的旋转木马还不起作用&#xff0c;所以让我们使用 js 让它工作。打开app.js文件并开始编码。</p> 
<pre><code class="prism language-javascript"><span class="token keyword">const</span> carousel <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;.carousel img&#39;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> carouselImageIndex <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">changeCarousel</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    carousel<span class="token punctuation">[</span>carouselImageIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">if</span><span class="token punctuation">(</span>carouselImageIndex <span class="token operator">&gt;&#61;</span> carousel<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        carouselImageIndex <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
        carouselImageIndex<span class="token operator">&#43;&#43;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    carousel<span class="token punctuation">[</span>carouselImageIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">changeCarousel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>您可以看到我们的轮播元素&#xff0c;每 3 秒切换一次图像active类。</p> 
<p><img src="https://img-blog.csdnimg.cn/5eea9a8c0f024c0eb9173622593677ef.gif" alt="在这里插入图片描述" width="200" /></p> 
<p>现在让我们制作我们的播放器部分。</p> 
<h2><a id="_playersection__241"></a>&#x1f356; player-section 播放器部分</h2> 
<p>首先使其最小化视图。</p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>music-player-section<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/back.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>back-btn icon hide<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/nav.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>nav-btn icon hide<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>current-song-name<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>song 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>artist-name hide<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>artist 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 1.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>cover hide<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>seek-bar-container<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>range<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>music-seek-bar<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>0<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>current-time hide<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>00 : 00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>duration hide<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>00 : 00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>controls<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-redo<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>main<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-backward active<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-play active<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-pause<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-forward active<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>range<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>volume-slider<span class="token punctuation">&#34;</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>1<span class="token punctuation">&#34;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>1<span class="token punctuation">&#34;</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>0.1<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-volume-up<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>如果你看到我们的播放器结构&#xff0c;你会注意到我们有很多hide元素的类。此类hide指示元素将在最小化视图中隐藏。我们为所有元素提供了相同的类&#xff0c;因此我们可以轻松地在 CSS 中设置它们的样式。</p> 
<pre><code class="prism language-css"><span class="token selector">.music-player-section</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--alpha-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>50px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-seek-bar</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> -4px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--secondary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-seek-bar::-webkit-slider-thumb</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> -400px 0 0 400px <span class="token function">var</span><span class="token punctuation">(</span>--primary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.current-song-name</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.controls</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.controls span</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .controls</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .controls span</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0.5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .controls span.active</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.controls .main i</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 0 5px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.controls .main i.active</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>现在让我们创建最大化视图的样式。</p> 
<pre><code class="prism language-css"><span class="token selector">.music-player-section .hide</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .hide</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .music-seek-bar</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .current-song-name</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.music-player-section.active .controls</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.artist-name</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.cover</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 30vh<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 30vh<span class="token punctuation">;</span>
    <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--shadow<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.current-time</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.duration</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.icon</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.back-btn</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.nav-btn</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">right</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* volume button */</span>

<span class="token selector">.volume-slider</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> -35px<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--alpha-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.volume-slider.active</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.volume-slider::-webkit-slider-thumb</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> -200px 0 1px 200px <span class="token function">var</span><span class="token punctuation">(</span>--primary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>输出</strong><br /> <img src="https://img-blog.csdnimg.cn/818f96398ceb4409bc6341aecfeab838.png" alt="在这里插入图片描述" width="400" /><br /> 并检查这些样式&#xff0c;现在像这样将<code>active</code>添加到 class <code>music-player-section</code> 中去。</p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>music-player-section active<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p><strong>输出</strong><br /> <img src="https://img-blog.csdnimg.cn/198adaf9122e422389d2222e586c20a2.png" alt="在这里插入图片描述" width="300" /><br /> 我们最终会让这个播放器发挥作用。现在从player section类删除这个active。让我们创建播放列表部分。</p> 
<h2><a id="_playlistsection__479"></a>&#x1f3c6; playlist-section 播放列表部分</h2> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>playlist active<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/back.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>back-btn icon<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>title<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>播放列表<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>queue active<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>queue-cover<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>assets/images/cover 1.png<span class="token punctuation">&#34;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>fas fa-pause<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>name<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span>song 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    // &#43;7
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p><strong>CSS</strong></p> 
<pre><code class="prism language-css"><span class="token selector">.playlist</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> -100%<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 30px 0<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.playlist.active</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.title</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> 300<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
    <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.queue</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0 30px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> 2px solid <span class="token function">var</span><span class="token punctuation">(</span>--alpha-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.queue-cover</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.queue-cover img</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.queue-cover i</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.queue.active i</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.queue .name</span><span class="token punctuation">{<!-- --></span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
    <span class="token property">text-transform</span><span class="token punctuation">:</span> capitalize<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p><strong>输出</strong></p> 
<p><img src="https://img-blog.csdnimg.cn/34a1c4fff7174412ad1b83d3648692f1.png" alt="在这里插入图片描述" width="200" /><br /> 我们已经完成了所有的造型。active也从播放列表部分删除类。</p> 
<p>现在让我们 JS 使这个音乐应用程序功能齐全。</p> 
<h2><a id="_navigation__577"></a>✨ navigation 导航部分</h2> 
<p>我们的音乐播放器中有三个部分。因此&#xff0c;为这个应用程序设置导航系统对我们来说非常重要。通过它我们可以轻松地从一个部分导航到另一个部分。对&#xff1f;所以编码这个。</p> 
<pre><code class="prism language-javascript"><span class="token comment">/导航</span>

<span class="token comment">切换音乐播放器</span>
<span class="token keyword">const</span> musicPlayerSection <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.music-player-section&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> clickCount <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
musicPlayerSection<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>clickCount <span class="token operator">&gt;&#61;</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        musicPlayerSection<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        clickCount <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    clickCount<span class="token operator">&#43;&#43;</span><span class="token punctuation">;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
        clickCount <span class="token operator">&#61;</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">250</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">/// 从音乐播放器返回</span>
<span class="token keyword">const</span> backToHomeBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.music-player-section .back-btn&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

backToHomeBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    musicPlayerSection<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">/// 访问播放列表</span>
<span class="token keyword">const</span> playlistSection <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.playlist&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> navBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.music-player-section .nav-btn&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

navBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    playlistSection<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 从播放列表返回到音乐播放器</span>
<span class="token keyword">const</span> backToMusicPlayer <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.playlist .back-btn&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

backToMusicPlayer<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    playlistSection<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//导航完成</span>
</code></pre> 
<p>这是基本的 JS&#xff0c;我还在代码中添加了注释。因此&#xff0c;如果您对此代码有任何疑问&#xff0c;请随时在讨论中问我。我们的导航完成了。所以让我们创建我们的音乐播放器。</p> 
<h2><a id="_music__622"></a>&#x1f3b6; music 音乐部分</h2> 
<p>对于音乐播放器&#xff0c;我们的页面中需要一个音频源&#xff0c;但现在我们没有。为此在 <code>index.html</code> 中创建一个音频元素。在 body 标记的开头创建此元素。</p> 
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span><span class="token punctuation">&#34;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">&#61;</span><span class="token punctuation">&#34;</span>audio-source<span class="token punctuation">&#34;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>audio</span><span class="token punctuation">&gt;</span></span>
</code></pre> 
<p>现在我们必须创建很多函数&#xff0c;所以在开始之前让我们快速选择我们可能需要进行操作的所有元素。</p> 
<pre><code class="prism language-javascript"><span class="token comment">/// 音乐</span>

<span class="token keyword">let</span> currentMusic <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> music <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;#audio-source&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> seekBar <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.music-seek-bar&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> songName <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.current-song-name&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> artistName <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.artist-name&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> coverImage <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.cover&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> currentMusicTime <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.current-time&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> musicDuration <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.duration&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> queue <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;.queue&#39;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 在此处选择所有按钮</span>

<span class="token keyword">const</span> forwardBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;i.fa-forward&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> backwardBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;i.fa-backward&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> playBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;i.fa-play&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> pauseBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;i.fa-pause&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> repeatBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;span.fa-redo&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> volumeBtn <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;span.fa-volume-up&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> volumeSlider <span class="token operator">&#61;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;.volume-slider&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>现在设置音乐源。</p> 
<pre><code class="prism language-javascript"><span class="token comment">// 音乐设置功能</span>

<span class="token keyword">const</span> <span class="token function-variable function">setMusic</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    seekBar<span class="token punctuation">.</span>value <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> song <span class="token operator">&#61;</span> songs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    currentMusic <span class="token operator">&#61;</span> i<span class="token punctuation">;</span>

    music<span class="token punctuation">.</span>src <span class="token operator">&#61;</span> song<span class="token punctuation">.</span>path<span class="token punctuation">;</span>

    songName<span class="token punctuation">.</span>innerHTML <span class="token operator">&#61;</span> song<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
    artistName<span class="token punctuation">.</span>innerHTML <span class="token operator">&#61;</span> song<span class="token punctuation">.</span>artist<span class="token punctuation">;</span>
    coverImage<span class="token punctuation">.</span>src <span class="token operator">&#61;</span> song<span class="token punctuation">.</span>cover<span class="token punctuation">;</span>

    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
        seekBar<span class="token punctuation">.</span>max <span class="token operator">&#61;</span> music<span class="token punctuation">.</span>duration<span class="token punctuation">;</span>
        musicDuration<span class="token punctuation">.</span>innerHTML <span class="token operator">&#61;</span> <span class="token function">formatTime</span><span class="token punctuation">(</span>music<span class="token punctuation">.</span>duration<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    currentMusicTime<span class="token punctuation">.</span>innerHTML <span class="token operator">&#61;</span> <span class="token string">&#39;00 : 00&#39;</span><span class="token punctuation">;</span>
    queue<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">&#61;&gt;</span> item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    queue<span class="token punctuation">[</span>currentMusic<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">setMusic</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
<p>你可以注意到&#xff0c;为了设置持续时间&#xff0c;我们调用了formatTime&#xff0c;现在创建这个。</p> 
<pre><code class="prism language-javascript"><span class="token comment">// 格式持续时间为 00 : 00 格式</span>

<span class="token keyword">const</span> <span class="token function-variable function">formatTime</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">time</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">let</span> min <span class="token operator">&#61;</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>time <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>min <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        min <span class="token operator">&#61;</span> <span class="token template-string"><span class="token template-punctuation string">&#96;</span><span class="token string">0</span><span class="token template-punctuation string">&#96;</span></span> <span class="token operator">&#43;</span> min<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">let</span> sec <span class="token operator">&#61;</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>time <span class="token operator">%</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>sec <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        sec <span class="token operator">&#61;</span> <span class="token template-string"><span class="token template-punctuation string">&#96;</span><span class="token string">0</span><span class="token template-punctuation string">&#96;</span></span> <span class="token operator">&#43;</span> sec<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">&#96;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>min<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> : </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>sec<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">&#96;</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> 
<p>现在让我们添加播放/暂停事件。</p> 
<pre><code class="prism language-javascript"><span class="token comment">// playBtn 点击事件</span>

playBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    music<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    playBtn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    pauseBtn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// pauseBtn 点击事件</span>

pauseBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    music<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    pauseBtn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    playBtn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>我们已经完成了音乐的设置和播放/暂停。现在进行向前/向后事件。</p> 
<pre><code class="prism language-javascript"><span class="token comment">//  向前按钮</span>

forwardBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>currentMusic <span class="token operator">&gt;&#61;</span> songs<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        currentMusic <span class="token operator">&#61;</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
        currentMusic<span class="token operator">&#43;&#43;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">setMusic</span><span class="token punctuation">(</span>currentMusic<span class="token punctuation">)</span><span class="token punctuation">;</span>
    playBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 后退按钮</span>

backwardBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>currentMusic <span class="token operator">&lt;&#61;</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        currentMusic <span class="token operator">&#61;</span> songs<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
        currentMusic<span class="token operator">--</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">setMusic</span><span class="token punctuation">(</span>currentMusic<span class="token punctuation">)</span><span class="token punctuation">;</span>
    playBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>快完成了&#xff0c;现在创建搜索栏功能。</p> 
<pre><code class="prism language-javascript"><span class="token comment">// 搜索栏事件</span>

<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    seekBar<span class="token punctuation">.</span>value <span class="token operator">&#61;</span> music<span class="token punctuation">.</span>currentTime<span class="token punctuation">;</span>
    currentMusicTime<span class="token punctuation">.</span>innerHTML <span class="token operator">&#61;</span> <span class="token function">formatTime</span><span class="token punctuation">(</span>music<span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>music<span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span> <span class="token operator">&#61;&#61;</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>seekBar<span class="token punctuation">.</span>max<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>repeatBtn<span class="token punctuation">.</span>className<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token function">setMusic</span><span class="token punctuation">(</span>currentMusic<span class="token punctuation">)</span><span class="token punctuation">;</span>
            playBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
            forwardBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span>

seekBar<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;change&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    music<span class="token punctuation">.</span>currentTime <span class="token operator">&#61;</span> seekBar<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>做了这个之后。创建刷新功能和音量选项。</p> 
<pre><code class="prism language-javascript"><span class="token comment">// 刷新按钮</span>

repeatBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    repeatBtn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 音量部分</span>

volumeBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    volumeBtn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    volumeSlider<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">&#39;active&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

volumeSlider<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;input&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    music<span class="token punctuation">.</span>volume <span class="token operator">&#61;</span> volumeSlider<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>我们的播放器完成了。我们要做的最后一件事是使我们的播放列表正常运行。</p> 
<pre><code class="prism language-javascript">queue<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
    item<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;click&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
        <span class="token function">setMusic</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
        playBtn<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p>到这里我们已经完成了所有代码。播放器、导航栏、播放列表、轮播图&#xff0c;刷新&#xff0c;音量加减等等</p> 
<h2><a id="_wuhu____803"></a>&#x1f6ec; wuhu ! 起飞 !</h2> 
<p>希望通过本文&#xff0c;您已经学会了如何使用 HTML、CSS 和 JS 的在线音乐播放器。我之前使用 HTML、CSS 和 JavaScript 制作了更多类型的小工具&#xff0c;如果您愿意&#xff0c;可以查看这些设计。</p> 
<p><a href="https://haiyong.blog.csdn.net/article/details/120203399">使用 HTML、CSS 和 JS 的简单倒数计时器</a><br /> <a href="https://haiyong.blog.csdn.net/article/details/119407004">使用 HTML、CSS 和 JavaScript 制作的随机密码生成器</a><br /> <a href="https://haiyong.blog.csdn.net/article/details/119079126">使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序</a><br /> <a href="https://haiyong.blog.csdn.net/article/details/118487938">你真的熟练运用 HTML5 了吗&#xff0c;这10 个酷炫的 H5 特性你会几个&#xff1f;</a><br /> <a href="https://haiyong.blog.csdn.net/article/details/120085442">使用 HTML、CSS 和 JS 创建响应式可过滤的游戏&#43;工具展示页面 </a><br /> <a href="https://haiyong.blog.csdn.net/article/details/113812064">11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】</a></p> 
<blockquote> 
 <p>我已经写了很长一段时间的技术博客&#xff0c;并且主要通过CSDN发表&#xff0c;这是我的一篇 Web 在线音乐播放器教程。我喜欢通过文章分享技术与快乐。您可以访问我的博客&#xff1a; <a href="https://haiyong.blog.csdn.net/">https://haiyong.blog.csdn.net/</a> 以了解更多信息。希望你们会喜欢&#xff01;&#x1f60a;</p> 
</blockquote> 
<p><font color="#7FFF00"><strong>&#x1f48c; 欢迎大家在评论区提出意见和建议&#xff01;&#x1f48c;</strong></font></p> 
<h2><a id="__819"></a>&#x1f3a1; 完整源码下载</h2> 
<p><font color="#F08080" id="jump99"><strong>如果你真的从这篇文章中学到了一些新东西&#xff0c;喜欢它&#xff0c;收藏它并与你的小伙伴分享。&#x1f917;最后&#xff0c;不要忘了❤或&#x1f4d1;支持一下哦。</strong></font></p> 
<p><strong>完整的源代码&#xff1a;<a href="https://download.csdn.net/download/qq_44273429/22643233">点击此处下载</a></strong> &#xff08;可能审核不过&#xff09;</p> 
<p><strong>免费源码可通过下方公号回复代码获取&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;</strong></p>
                </div>
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="stylesheet">
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css" rel="stylesheet">
        </div>
        <div id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"></div>
    </article>
</div>
<div class="more-toolbox-new" id="toolBarBox">
    <div class="left-toolbox">
        <div class="toolbox-left">
            <div class="profile-box"><a class="profile-href" target="_blank" href="https://haiyong.blog.csdn.net"><img class="profile-img" src="https://profile.csdnimg.cn/9/F/B/3_qq_44273429"><span class="profile-name">海拥✘</span></a></div>
            <div class="profile-attend">
                    <a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a>
                <a class="tool-item-follow active-animation" style="display:none;">关注</a>
            </div>
        </div>
        <div class="toolbox-middle">
        <ul class="toolbox-list">
            <li class="tool-item tool-item-size tool-active is-like" id="is-like">
            <a class="tool-item-href">
                <img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt="">
                <img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart1Active.png" alt="">
                <img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart1Black.png" alt="">  
                <span id="spanCount" class="count ">
                        203
                </span>
            </a>
            <div class="tool-hover-tip"><span class="text space">点赞</span></div>
            </li>
            <li class="tool-item tool-item-size tool-active tool-item-comment">
            <a class="tool-item-href" href="#commentBox">
                <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCommentBlack.png" alt="">
                <span class="count">
                    65
                </span>
            </a>
            <div class="tool-hover-tip"><span class="text space">评论</span></div>
            </li>
            <li class="tool-item tool-item-size tool-active is-collection ">
            <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'>
                <img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive.png" alt="">
                <img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectBlack.png" alt="">
                <img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt="">
                <span class="count get-collection " id="get-collection">
                    506
                </span>
            </a>
            <div class="tool-hover-tip"><span class="text space">收藏</span></div>
            </li>
            <li class="tool-item tool-active">
                <a class="" href="javascript:;">
                    <img class="company active" id="health-companies" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHealthCompanies1Active.gif" alt="一键三连">
                </a>
                <div class="tool-hover-tip three-click"><span class="text">一键三连</span></div>
            </li>
            <li class="tool-item tool-item-bar">
            </li>
            <li class="tool-item tool-item-size tool-active tool-QRcode" id="tool-share">
                <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"1582594662_002","spm":"1001.2101.3001.4129","ab":"new"}'>
                    <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newShareBlack.png" alt="">
                </a>
                <div class="QRcode" id="tool-QRcode">
                    <p class="title">
                    扫一扫，分享海报
                    </p>
                    <div id='shareCode'></div>
                </div>
            </li>
        </ul>
        </div>
        <div class="toolbox-right">
                <div class="tool-directory">
                    <a class="bt-columnlist-show"
                    data-id="11289568"
                    data-free="true"
                    data-subscribe="false"
                    data-title="新原力计划"
                    data-img="https://img-blog.csdnimg.cn/20210816113410370.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224"
                    data-url="https://blog.csdn.net/qq_44273429/category_11289568.html"
                    data-sum="6"
                    data-people="10"
                    data-price="0"
                    data-oldprice="0"
                    data-join="false"
                    data-studyvip="false"
                    data-studysubscribe="false"
                    data-report-view='{"spm":"1001.2101.3001.6334","extend1":"专栏目录"}'
                    data-report-click='{"spm":"1001.2101.3001.6334","extend1":"专栏目录"}'
                    >专栏目录</a>
                </div>
        </div>
    </div>  
</div>
<script type=text/javascript crossorigin src="https://csdnimg.cn/release/phoenix/production/qrcode-7c90a92189.min.js"></script>
<script src="//g.csdnimg.cn/??sharewx/1.2.1/sharewx.js" type="text/javascript"></script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/user-login/3.0.1/user-login.js"></script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/collection-box/2.0.6/collection-box.js"></script>
                <div class="first-recommend-box recommend-box">
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/qq_44273429/22643233"  data-report-view='{"ab":"new","mod":"popu_871","extra":"{\"utm_medium\":\"distribute.pc_relevant_t0.none-task-download-2~default~essearch~vector-1.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"1","strategy":"2~default~essearch~vector","dest":"https://download.csdn.net/download/qq_44273429/22643233"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/qq_44273429/22643233" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_871","extra":"{\"utm_medium\":\"distribute.pc_relevant_t0.none-task-download-2~default~essearch~vector-1.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"1","strategy":"2~default~essearch~vector","dest":"https://download.csdn.net/download/qq_44273429/22643233"}'  data-report-query='utm_medium=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7Eessearch%7Evector-1.no_search_link&depth_1-utm_source=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7Eessearch%7Evector-1.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">使用 <em>HTML</em>、<em>CSS</em> 和 <em>JS</em> <em>创建</em><em>在线音乐</em><em>播放器</em>.zip</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">09-13</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/qq_44273429/22643233" target="_blank"  data-report-click='{"ab":"new","mod":"popu_871","extra":"{\"utm_medium\":\"distribute.pc_relevant_t0.none-task-download-2~default~essearch~vector-1.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"1","strategy":"2~default~essearch~vector","dest":"https://download.csdn.net/download/qq_44273429/22643233"}'  data-report-query='utm_medium=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7Eessearch%7Evector-1.no_search_link&depth_1-utm_source=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7Eessearch%7Evector-1.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">今天我将带着大家使用 <em>HTML</em>、<em>CSS</em> 和 <em>JS</em><em>创建</em> [<em>音乐播放器</em>](http://haiyong.site/yinyue)，没有使用任何其他库。我们的<em>音乐播放器</em>具有三个部分。主屏幕、<em>播放器</em>部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个<em>音乐播放器</em>最好的部分是它最小化了<em>音乐播放器</em>。是的，您可以最小化和最大化<em>播放器</em>本身。使这个项目成为一个很棒的<em>音乐播放器</em>。</div>
			</a>
		</div>
	</div>
</div>
                </div>
            <div class="second-recommend-box recommend-box">
<div class="recommend-item-box type_blog clearfix" data-url="https://qq365392777.blog.csdn.net/article/details/119456397"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"1","strategy":"2~default~CTRLIST~default","dest":"https://qq365392777.blog.csdn.net/article/details/119456397"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://qq365392777.blog.csdn.net/article/details/119456397" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"1","strategy":"2~default~CTRLIST~default","dest":"https://qq365392777.blog.csdn.net/article/details/119456397"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>HTML5</em>期末大作业：音乐网站设计&mdash;&mdash;风车乐栈<em>在线音乐</em>播放<em>HTML</em>+<em>CSS</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/ruan365392777" target="_blank"><span class="blog-title">程序员告白源码100款~ Dreamweaver网页设计与制作200例~</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">08-06</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					38
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://qq365392777.blog.csdn.net/article/details/119456397" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-1.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"1","strategy":"2~default~CTRLIST~default","dest":"https://qq365392777.blog.csdn.net/article/details/119456397"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>HTML5</em>期末大作业：音乐网站设计&mdash;&mdash;风车乐栈<em>在线音乐</em>播放<em>HTML</em>+<em>CSS</em>
临近期末, 你还在为<em>HTML</em>网页设计结课作业,老师的作业要求感到头大？<em>HTML</em>网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始<em>HTML</em>+<em>CSS</em>+<em>JS</em>页面设计, web大学生网页设计作业<em>源码</em>，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介方面 ：<em>HTML</em>期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响</div>
			</a>
		</div>
	</div>
</div>
            </div>
<a id="commentBox" name="commentBox"></a>
<div class="comment-box">
	<div class="comment-edit-box d-flex">
		<a id="commentsedit"></a>
		<div class="user-img">
			<a href="javascript:void(0);" >
				<img class="show_loginbox" src="https://g.csdnimg.cn/static/user-img/anonymous-User-img.png">
			</a>
		</div>
		<form id="commentform">
			<img class="comment-sofa-flag" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentFlag@2x.png">
      <textarea class="comment-content" name="comment_content" id="comment_content" placeholder="优质评论可以帮助作者获得更高权重" maxlength="1000"></textarea>
			<div class="comment-emoticon"><img class="comment-emoticon-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/emoticon.png" alt="表情包"></div> 
      <span class="comment-emoticon-tip">插入表情</span>
      <div class="comment-emoticon-box">
        <div class="comment-emoticon-img-box"></div>
			</div>
      <div class="opt-box">
				<div id="ubbtools" class="add_code">
					<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
				</div>
				<input type="hidden" id="comment_replyId" name="comment_replyId">
				<input type="hidden" id="article_id" name="article_id" value="120263267">
				<input type="hidden" id="comment_userId" name="comment_userId" value="">
				<input type="hidden" id="commentId" name="commentId" value="">
				<div class="dropdown" id="myDrap">
					<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button"
						aria-haspopup="true" aria-expanded="false">
						<div class="txt-selected text-truncate">添加代码片</div>
						<svg class="icon d-block" width="200px" height="100.00px" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path  d="M597.33333292 298.666667h853.333334L1023.99999992 725.333333 597.33333292 298.666667z"  /></svg>
					</a>
					<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
						<li><a data-code="html">HTML/XML</a></li>
						<li><a data-code="objc">objective-c</a></li>
						<li><a data-code="ruby">Ruby</a></li>
						<li><a data-code="php">PHP</a></li>
						<li><a data-code="csharp">C</a></li>
						<li><a data-code="cpp">C++</a></li>
						<li><a data-code="javascript">JavaScript</a></li>
						<li><a data-code="python">Python</a></li>
						<li><a data-code="java">Java</a></li>
						<li><a data-code="css">CSS</a></li>
						<li><a data-code="sql">SQL</a></li>
						<li><a data-code="plain">其它</a></li>
					</ul>
				</div>
				<div class="right-box" id="rightBox" data-type="2">
							<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
							<a data-report-click='{"mod":"1582594662_003","spm":"1001.2101.3001.4227","ab":"new"}'><input type="submit"
									class="btn btn-sm btn-comment" value="发表评论"></a>
				</div>
			</div>
		</form>
		<input type="button" class="bt-comment-show" value="评论">
	</div>
	<div class="comment-list-container">
		<a id="comments"></a>
		<div class="comment-list-box">
		</div>
		<div id="commentPage" class="pagination-box d-none"></div>
		<div class="opt-box text-center">
			<div class="btn btn-sm btn-link-blue" id="btnMoreComment"></div>
		</div>
	</div>
</div>            <div class="recommend-box insert-baidu-box">
                <div class="recommend-item-box clearfix" style="display:none"></div>
<div class="recommend-item-box type_blog clearfix" data-url="https://chocolate.blog.csdn.net/article/details/103974082"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"2","strategy":"2~default~CTRLIST~default","dest":"https://chocolate.blog.csdn.net/article/details/103974082"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://chocolate.blog.csdn.net/article/details/103974082" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"2","strategy":"2~default~CTRLIST~default","dest":"https://chocolate.blog.csdn.net/article/details/103974082"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">2020 零基础 Vue综合应用 教开发<em>音乐播放器</em>&mdash;悦听（激发编程乐趣）【整理+<em>源码</em>】</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_42429718" target="_blank"><span class="blog-title">超逸の学习技术博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">01-14</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					4695
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://chocolate.blog.csdn.net/article/details/103974082" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-2.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"2","strategy":"2~default~CTRLIST~default","dest":"https://chocolate.blog.csdn.net/article/details/103974082"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">文章目录1、引言2、<em>音乐播放器</em><em>完整</em>版效果图如下：3、接口引用4、示例代码5、结束语
1、引言
这是Vue学习的综合应用篇，教你开发一个<em>音乐播放器</em>，能听歌，能看热门留言，能看mv，开发主要是以下环节：

 ① 歌曲搜索
 ② 歌曲播放
 ③ 歌曲封面
 ④ 歌曲评论
 ⑤ 播放动画
 ⑥ mv播放

2、<em>音乐播放器</em><em>完整</em>版效果图如下：

3、接口引用
 3.1:歌曲搜索接口

    请求地址:htt...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://lyyong.blog.csdn.net/article/details/120207166"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"3","strategy":"2~default~CTRLIST~default","dest":"https://lyyong.blog.csdn.net/article/details/120207166"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://lyyong.blog.csdn.net/article/details/120207166" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"3","strategy":"2~default~CTRLIST~default","dest":"https://lyyong.blog.csdn.net/article/details/120207166"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-3.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-3.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>+<em>CSS</em>+<em>JS</em>实现 <em>❤</em><em>️</em>酷炫HUD科幻数据屏幕动画界面<em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_39709134" target="_blank"><span class="blog-title">java李阳勇的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-09</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					562
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://lyyong.blog.csdn.net/article/details/120207166" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"3","strategy":"2~default~CTRLIST~default","dest":"https://lyyong.blog.csdn.net/article/details/120207166"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-3.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-3.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">???? 作者主页：Java李杨勇

???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 



效果演示：文末获取<em>源码</em>





代码目录：







主要代码实现：


<em>CSS</em>样式：


.box {
    position: fixed;
    /*绝对定位*/
    width: 1290;
    /*1920*/
    height: 1080px;</div>
			</a>
		</div>
	</div>
</div>
		<dl id="recommend-item-box-tow" class="recommend-item-box type_blog clearfix">
			
		</dl>
<div class="recommend-item-box type_blog clearfix" data-url="https://gu-han-zhe.blog.csdn.net/article/details/118771231"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-4.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"4","strategy":"2~default~CTRLIST~default","dest":"https://gu-han-zhe.blog.csdn.net/article/details/118771231"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://gu-han-zhe.blog.csdn.net/article/details/118771231" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-4.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"4","strategy":"2~default~CTRLIST~default","dest":"https://gu-han-zhe.blog.csdn.net/article/details/118771231"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>两万字笔记大总结【<em>❤</em><em>️</em>熬夜整理&amp;建议收藏<em>❤</em><em>️</em>】（上篇）</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44907926" target="_blank"><span class="blog-title">孤寒者的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">07-16</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					1万+
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://gu-han-zhe.blog.csdn.net/article/details/118771231" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-4.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"4","strategy":"2~default~CTRLIST~default","dest":"https://gu-han-zhe.blog.csdn.net/article/details/118771231"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">&emsp;????上一篇博文两万字博文教你python爬虫requests库，看完还不会我把我女朋友都给你【<em>❤</em><em>️</em>熬夜整理&amp;建议收藏<em>❤</em><em>️</em>】被众多爬虫爱好者/想要学习爬虫的小伙伴们阅读之后，很多小伙伴私信我说&mdash;&mdash;爬是会爬了，但是爬下来的都是网页<em>源码</em>数据，真心看不懂鸭！该怎么办？????
&emsp;????（苦笑）为了能让小伙伴们对日后所学的页面解析库理解更深，所以本博主又连夜加班加点，苦苦熬制本文，为大家深入全面的讲解一下常见的前端知识&mdash;&mdash;学啥技术都是从底层抓起，万丈高楼平地起，它也是基于地基稳！ 所以本文是比页面解析</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/goaler/article/details/125720"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-5.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"5","strategy":"2~default~CTRLIST~default","dest":"https://blog.csdn.net/goaler/article/details/125720"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://blog.csdn.net/goaler/article/details/125720" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-5.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"5","strategy":"2~default~CTRLIST~default","dest":"https://blog.csdn.net/goaler/article/details/125720"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-5.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-5.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">韩国<em>播放器</em>Aquamp(已经汉化) </div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/goaler" target="_blank"><span class="blog-title">Goaler&#39;s Blog</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">10-06</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					2929
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://blog.csdn.net/goaler/article/details/125720" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-5.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"5","strategy":"2~default~CTRLIST~default","dest":"https://blog.csdn.net/goaler/article/details/125720"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-5.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-5.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">很不错的一个网页<em>音乐播放器</em>，用框架模式实现音乐自动连续播放，并可以链接远程或本地的音乐文件下载地址：http://goaler.xicp.net/Doc/Music/Aquamp.rar演示：http://www.goaler.info/index.<em>html</em>这本来是一款韩国的名叫aquamp的<em>播放器</em>，但是原先是需要PHP支持才能使用的，偶改了一下，现在可以适应任何环境使用！别外，我把一些多的界面给</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="http://download.csdn.net/download/wwhhll888/3710732"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~essearch~vector-6.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"6","strategy":"2~default~essearch~vector","dest":"http://download.csdn.net/download/wwhhll888/3710732"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="http://download.csdn.net/download/wwhhll888/3710732" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~essearch~vector-6.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"6","strategy":"2~default~essearch~vector","dest":"http://download.csdn.net/download/wwhhll888/3710732"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7Eessearch%7Evector-6.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7Eessearch%7Evector-6.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>在线音乐</em><em>播放器</em><em>完整</em><em>源码</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">10-23</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="http://download.csdn.net/download/wwhhll888/3710732" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~essearch~vector-6.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"6","strategy":"2~default~essearch~vector","dest":"http://download.csdn.net/download/wwhhll888/3710732"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7Eessearch%7Evector-6.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7Eessearch%7Evector-6.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1"><em>在线音乐</em><em>播放器</em>的<em>源码</em>  希望对学习相关知识的朋友们有点用</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://haiyong.blog.csdn.net/article/details/120203399"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-7.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"7","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/120203399"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://haiyong.blog.csdn.net/article/details/120203399" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-7.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"7","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/120203399"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-7.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-7.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>❤</em><em>️</em>使用 <em>HTML</em>、<em>CSS</em> 和 <em>JS</em> 的简单倒数计时器 <em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44273429" target="_blank"><span class="blog-title">努力是为了站在万人中央，成为别人的光</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-10</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					1万+
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://haiyong.blog.csdn.net/article/details/120203399" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-7.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"7","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/120203399"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-7.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-7.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。
在本文中，我使用简单的 JavaScript 代码<em>创建</em>了一个倒数计时器和你分享。
您可以观看它的现场演示以了解它是如何工作的。如果您知道如何<em>创建</em>数字时钟，那么<em>创建</em>这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。
正如您在上图中所看到的，我在这</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://lyyong.blog.csdn.net/article/details/120136063"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-8.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"8","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120136063"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://lyyong.blog.csdn.net/article/details/120136063" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-8.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"8","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120136063"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-8.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-8.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>+<em>CSS</em>+<em>JS</em>实现 <em>❤</em><em>️</em>贪吃蛇游戏<em>源码</em><em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_39709134" target="_blank"><span class="blog-title">java李阳勇的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-06</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					1147
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://lyyong.blog.csdn.net/article/details/120136063" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-8.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"8","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120136063"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-8.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-8.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">效果演示：



代码目录：





主要代码实现：


部分代码 :


&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;Docum...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://haiyong.blog.csdn.net/article/details/119724717"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-9.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"9","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/119724717"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://haiyong.blog.csdn.net/article/details/119724717" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-9.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"9","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/119724717"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-9.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-9.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>❤</em><em>️</em>使用 <em>HTML</em>、<em>CSS</em> 和 JavaScript 的简单模拟时钟<em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44273429" target="_blank"><span class="blog-title">努力是为了站在万人中央，成为别人的光</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">08-16</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					2万+
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://haiyong.blog.csdn.net/article/details/119724717" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-9.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"9","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/119724717"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-9.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-9.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。

????使用 <em>HTML</em>、<em>CSS</em> 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 <em>HTML</em>、<em>CSS</em> 和 JavaScript 的简单模拟时钟???? 第 1 步：<em>创建</em>时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://haiyong.blog.csdn.net/article/details/119079126"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-10.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"10","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/119079126"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://haiyong.blog.csdn.net/article/details/119079126" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-10.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"10","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/119079126"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-10.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-10.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">使用 <em>HTML</em>、<em>CSS</em>、<em>JS</em> 和 API 制作一个很棒的天气 Web 应用程序</div>
					<div class="tag">热门推荐</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44273429" target="_blank"><span class="blog-title">努力是为了站在万人中央，成为别人的光</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">07-25</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					3万+
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://haiyong.blog.csdn.net/article/details/119079126" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-10.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"10","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/119079126"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-10.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-10.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观<em>创建</em>凉爽的天气应用程序

⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源 第 2 步 - 从 index.<em>html</em> 开始 第 3 步 - 设置索引文件的样式 第 4 步 - 获取 Weather API 和 Unsplash API 密钥 第 5 步 - 从 JavaScript 编码开始 第 6 步 - <em>免费</em>托管您的网站！</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://haiyong.blog.csdn.net/article/details/113974310"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-11.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"11","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/113974310"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://haiyong.blog.csdn.net/article/details/113974310" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-11.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"11","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/113974310"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">基于<em>HTML</em>/<em>CSS</em>/<em>JS</em>的架子鼓，可以用键盘弹奏⌨<em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44273429" target="_blank"><span class="blog-title">努力是为了站在万人中央，成为别人的光</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">02-23</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					375
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://haiyong.blog.csdn.net/article/details/113974310" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-11.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"11","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/113974310"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">基于<em>HTML</em>/<em>CSS</em>的架子鼓，您可以用键盘弹奏⌨<em>️</em>组装套件怎么玩？进行声音检查下载1.CSDN积分下载2.关注公众号相关内容

我已经制作了吉他，您可以在这里找到它：
JavaScript????????制作一个可以正常工作的Guitar????
吉他演示：https://wanghao221.github.io/game/<em>js</em>-guitar/（打不开的话刷新试试）
架子鼓演示：https://wanghao221.github.io/game/<em>js</em>-drumkit/（打不开的话刷新试试）
代码已打包上传，</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://haiyong.blog.csdn.net/article/details/114648963"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"12","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/114648963"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://haiyong.blog.csdn.net/article/details/114648963" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"12","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/114648963"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-12.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-12.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">使用<em>HTML</em>，<em>CSS</em>和JavaScript<em>创建</em>Chrome扩展程序</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44273429" target="_blank"><span class="blog-title">努力是为了站在万人中央，成为别人的光</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">03-11</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					534
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://haiyong.blog.csdn.net/article/details/114648963" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-12.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"12","strategy":"2~default~CTRLIST~default","dest":"https://haiyong.blog.csdn.net/article/details/114648963"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-12.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-12.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">介绍
谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了Google Chrome浏览器，它可以帮助我同步书签，浏览器历史记录，密码管理器等等。
对于台式机，除了可以在Internet上浏览以外，您还可以做很多事情。您可以测试您的网页和全部。通过使用扩展程序，谷歌浏览器变得更加强大。
因此，今天，我们将研究如何使用<em>HTML</em>，<em>CSS</em>和JavaScript<em>创建</em>您的第一个Google Chrome扩展程序。
设置
要求
Chrome扩展入门的要求很少。列表在这里：

Google Chro.</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://lyyong.blog.csdn.net/article/details/120123500"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-13.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"13","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120123500"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://lyyong.blog.csdn.net/article/details/120123500" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-13.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"13","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120123500"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-13.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-13.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>+<em>CSS</em>+<em>JS</em>实现 <em>❤</em><em>️</em>响应式团队<em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_39709134" target="_blank"><span class="blog-title">java李阳勇的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-05</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					59
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://lyyong.blog.csdn.net/article/details/120123500" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-13.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"13","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120123500"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-13.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-13.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">效果演示：







代码目录：







主要代码实现：


<em>CSS</em>样式：


body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
}

.section-heading {
    font-family: &quot;Dancing Script&quot;,...</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://haiyong.blog.csdn.net/article/details/120085442"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-14.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"14","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/120085442"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://haiyong.blog.csdn.net/article/details/120085442" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-14.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"14","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/120085442"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-14.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-14.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>❤</em><em>️</em>使用 <em>HTML</em>、<em>CSS</em> 和 <em>JS</em> <em>创建</em>响应式可过滤的游戏+工具展示页面 <em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/qq_44273429" target="_blank"><span class="blog-title">努力是为了站在万人中央，成为别人的光</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-04</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					2万+
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://haiyong.blog.csdn.net/article/details/120085442" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-14.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"14","strategy":"2~default~essearch~vector","dest":"https://haiyong.blog.csdn.net/article/details/120085442"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-14.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-14.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">响应式可过滤的游戏+工具展示页面 用于各种网站以按类别对图像进行排序。在本文中，我将向您展示如何借助 <em>HTML</em> <em>CSS</em> 和 javascript <em>创建</em>响应式可过滤的游戏+工具展示页面。

可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序。单击这些类别中的任何一个时。然后可以看到该类别中的所有作品，而隐藏其余作品。结果，用户可以轻松地找到他选择的图像。</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_blog clearfix" data-url="https://lyyong.blog.csdn.net/article/details/120273973"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-15.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"15","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120273973"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://lyyong.blog.csdn.net/article/details/120273973" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-15.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"15","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120273973"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-15.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-15.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>+<em>CSS</em>+<em>JS</em>实现 <em>❤</em><em>️</em>美女拼图游戏<em>❤</em><em>️</em></div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info">
					<a href="https://blog.csdn.net/weixin_39709134" target="_blank"><span class="blog-title">java李阳勇的博客</span></a>
				</div>
				<div class="info display-flex">
					<span class="info-block time">09-13</span>
					<span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					2455
					</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://lyyong.blog.csdn.net/article/details/120273973" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~essearch~vector-15.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"15","strategy":"2~default~essearch~vector","dest":"https://lyyong.blog.csdn.net/article/details/120273973"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-15.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7Eessearch%7Evector-15.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">???? 作者主页：Java李杨勇

???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 



效果演示：文末获取<em>源码</em>





代码目录：







主要代码实现：


<em>CSS</em>样式：


<em>html</em> {
        padding: 0px;
        margin: 0px;
        background: #eee;
    }

    #</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/lvlei19911108/22755485"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-16.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"16","strategy":"2~default~BlogCommendHotData~default","dest":"https://download.csdn.net/download/lvlei19911108/22755485"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/lvlei19911108/22755485" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-16.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"16","strategy":"2~default~BlogCommendHotData~default","dest":"https://download.csdn.net/download/lvlei19911108/22755485"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-16.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-16.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">VUE2.0 全套 demo 讲解 基础 5（class 与 style 绑定）.pdf</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">09-14</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/lvlei19911108/22755485" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-16.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"16","strategy":"2~default~BlogCommendHotData~default","dest":"https://download.csdn.net/download/lvlei19911108/22755485"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-16.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-16.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">VUE2.0 全套 demo 讲解 基础 5（class 与 style 绑定）.pdf</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/yunxidzh/23132380"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-17.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"17","strategy":"2~default~BlogCommendHotData~default","dest":"https://download.csdn.net/download/yunxidzh/23132380"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="https://download.csdn.net/download/yunxidzh/23132380" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-17.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"17","strategy":"2~default~BlogCommendHotData~default","dest":"https://download.csdn.net/download/yunxidzh/23132380"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-17.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-17.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">数据结构课程设计报告停车场管理系统方案.doc</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">09-15</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="https://download.csdn.net/download/yunxidzh/23132380" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-17.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"17","strategy":"2~default~BlogCommendHotData~default","dest":"https://download.csdn.net/download/yunxidzh/23132380"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-17.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-17.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">数据结构课程设计报告停车场管理系统方案.doc</div>
			</a>
		</div>
	</div>
</div>
<div class="recommend-item-box type_download clearfix" data-url="http://download.csdn.net/download/rupan06/23188340"  data-report-view='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-18.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"18","strategy":"2~default~BlogCommendHotData~default","dest":"http://download.csdn.net/download/rupan06/23188340"}'>
	<div class="content-box">
		<div class="content-blog display-flex">
			<div class="title-box">
				<a href="http://download.csdn.net/download/rupan06/23188340" class="tit" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-18.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"18","strategy":"2~default~BlogCommendHotData~default","dest":"http://download.csdn.net/download/rupan06/23188340"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-18.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-18.no_search_link'>
					<div class="left ellipsis-online ellipsis-online-1">EverythingToolbar_0.7.2</div>
					<div class="tag">最新发布</div>
				</a>
			</div>
			<div class="info-box display-flex">
				<div class="info display-flex">
					<span class="info-block">09-15</span>
				</div>
			</div>
		</div>
		<div class="desc-box">
			<a href="http://download.csdn.net/download/rupan06/23188340" target="_blank"  data-report-click='{"ab":"new","mod":"popu_387","extra":"{\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~BlogCommendHotData~default-18.no_search_link\",\"dist_request_id\":\"1631862715072_72690\"}","dist_request_id":"1631862715072_72690","ab_strategy":"ctrlist","index":"18","strategy":"2~default~BlogCommendHotData~default","dest":"http://download.csdn.net/download/rupan06/23188340"}'  data-report-query='utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-18.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EBlogCommendHotData%7Edefault-18.no_search_link'>
				<div class="desc ellipsis-online ellipsis-online-1">本软件是Everything功能的拓展，为Windows任务栏集成。后台运行Everything后，可以在Windows任务栏直接搜索文件，效果和软件一样。</div>
			</a>
		</div>
	</div>
</div>
            </div>
            <div class="template-box">
                <span>©️2020 CSDN</span>
                <span>皮肤主题: 护眼</span>
                <span> 设计师:闪电赇</span>
                <span>
                    <a href="https://blog.csdn.net/" class="back-home c-blue c-blue-hover c-blue-focus">返回首页</a>
                </span>
            </div>
<div class="blog-footer-bottom" style="margin-top:10px;"></div>
<script src="https://g.csdnimg.cn/common/csdn-footer/csdn-footer.js" data-isfootertrack="false" type="text/javascript"></script>
<script type="text/javascript">
    window.csdn.csdnFooter.options = {
        el: '.blog-footer-bottom',
        type: 2
    }
</script>        </main>
<aside class="blog_container_aside">
	<div id="asideProfile" class="aside-box">
    <div class="profile-intro d-flex">
        <div class="avatar-box d-flex justify-content-center flex-column">
            <a href="https://haiyong.blog.csdn.net" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4121","dest":"https://haiyong.blog.csdn.net","ab":"new"}'>
                <img src="https://profile.csdnimg.cn/9/F/B/3_qq_44273429" class="avatar_pic">
            </a>
        </div>
        <div class="user-info d-flex flex-column profile-intro-name-box">
            <div class="profile-intro-name-boxTop">
                <a href="https://haiyong.blog.csdn.net" class="" id="uid" title="海拥✘" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4122","dest":"https://haiyong.blog.csdn.net","ab":"new"}'>
                    <span class="name vip-name" username="qq_44273429">海拥✘</span>
                </a>
                <span>
                <img class="identity" src="https://csdnimg.cn/release/blogv2/dist/mobile/img/vipNew.png" alt="">
                </span>
                <span class="flag expert-blog">
                <span class="bubble">CSDN认证博客专家</span>
                </span>
                <span class="flag company-blog">
                <span class="bubble">CSDN认证企业博客</span>
                </span>
            </div>
            <div class="profile-intro-name-boxFooter">
                <span class="personal-home-page personal-home-years">码龄3年</span>
                    <span class="personal-home-page">
                    <a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="全栈领域优质创作者">
                    <img src="https://img-home.csdnimg.cn/images/20210412060958.png" alt="">
                    全栈领域优质创作者
                    </a>
                    </span>
            </div>
        </div>
    </div>
    <div class="data-info d-flex item-tiling">
        <dl class="text-center" title="289">
            <a href="https://haiyong.blog.csdn.net" data-report-click='{"mod":"1598321000_001","spm":"1001.2101.3001.4310"}' data-report-query="t=1">  
                <dt><span class="count">289</span></dt>
                <dd class="font">原创</dd>
            </a>
        </dl>
        <dl class="text-center" data-report-click='{"mod":"1598321000_002","spm":"1001.2101.3001.4311"}' title="9">
            <a href="https://blog.csdn.net/rank/list/weekly" target="_blank">
                <dt><span class="count">9</span></dt>
                <dd class="font">周排名</dd>
            </a>
        </dl>
        <dl class="text-center" title="563">
            <a href="https://blog.csdn.net/rank/list/total" data-report-click='{"mod":"1598321000_003","spm":"1001.2101.3001.4312"}' target="_blank">
                <dt><span class="count">563</span></dt>
                <dd class="font">总排名</dd>
            </a>
        </dl>
        <dl class="text-center" style="min-width:58px" title="587587">  
            <dt><span class="count">58万+</span></dt>
            <dd>访问</dd>
        </dl>
        <dl class="text-center" title="7级,点击查看等级说明">
            <dt><a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank">
                <img class="level" src="https://csdnimg.cn/identity/blog7.png">
            </a>
            </dt>
            <dd>等级</dd>
        </dl>
    </div>
    <div class="item-rank"></div>
    <div class="data-info d-flex item-tiling">
        <dl class="text-center" title="16924">
            <dt><span class="count">1万+</span></dt>
            <dd>积分</dd>
        </dl>
         <dl class="text-center" id="fanBox" title="25766">
            <dt><span class="count" id="fan">2万+</span></dt>
            <dd>粉丝</dd>
        </dl>
        <dl class="text-center" title="6968">
            <dt><span class="count">6968</span></dt>
            <dd>获赞</dd>
        </dl>
        <dl class="text-center" title="4298">
            <dt><span class="count">4298</span></dt>
            <dd>评论</dd>
        </dl>
        <dl class="text-center" title="10996">
            <dt><span class="count">1万+</span></dt>
            <dd>收藏</dd>
        </dl>
    </div>
    <div class="aside-box-footer" data-report-view='{"spm":"3001.4296"}'>
        <div class="badge-box d-flex">
            <div class="badge d-flex">
                <div class="icon-badge" title="新人勋章">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/blinknewcomer@240.png" alt="新人勋章">
                    </div>
                </div>
                <div class="icon-badge" title="领英">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/linkedin@240.png" alt="领英">
                    </div>
                </div>
                <div class="icon-badge" title="GitHub">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/github@240.png" alt="GitHub">
                    </div>
                </div>
                <div class="icon-badge" title="脉脉勋章">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/maimai@240.png" alt="脉脉勋章">
                    </div>
                </div>
                <div class="icon-badge" title="签到王者">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qiandao300@240.png" alt="签到王者">
                    </div>
                </div>
                <div class="icon-badge" title="阅读者勋章Lv5">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/yuedu180@240.png" alt="阅读者勋章Lv5">
                    </div>
                </div>
                <div class="icon-badge" title="持之以恒">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/chizhiyiheng@240.png" alt="持之以恒">
                    </div>
                </div>
                <div class="icon-badge" title="1024勋章">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/1024@240.png" alt="1024勋章">
                    </div>
                </div>
                <div class="icon-badge" title="勤写标兵Lv4">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="勤写标兵Lv4">
                    </div>
                </div>
                <div class="icon-badge" title="分享王者">
                    <div class="mouse-box">
                        <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/fenxiangwangzhe@240.png" alt="分享王者">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="profile-intro-name-boxOpration">
        <div class="opt-letter-watch-box">
        <a class="bt-button personal-letter" href="https://im.csdn.net/chat/qq_44273429" target="_blank" rel="noopener">私信</a>
        </div>
        <div class="opt-letter-watch-box"> 
            <a class="personal-watch bt-button" id="btnAttent" >关注</a>  
        </div>
    </div>
</div>
<div id="asideSearchArticle" class="aside-box">
	<div class="aside-content search-comter">
    <div class="aside-search aside-search-blog">         
        <input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章">
        <a class="btn-search-blog">
                    <img src="//csdnimg.cn/cdn/content-toolbar/csdn-white-search.png?v=1587006908">
        </a>
    </div>
    </div>
</div>

<div id="asideCustom" class="aside-box custom-box">
    <h3 class="aside-title">❤️关注回复进群&#xff0c;各类学习资源免费送❤️</h3>
    <div class="aside-content clearfix">
        <p align="center"><img src="https://img-blog.csdnimg.cn/dc669cd374e44c618fa524841218f5c9.gif" alt="763aeeaceb2848c68f46552d29a206e8.gif" /></p> 
<p align="center"><a href="https://fj3xsec7hk.feishu.cn/docs/doccnYxai3uT51PqNsrOyPRJuHf"><font color="#fbff00"><b><u>❤️CSDN全栈技术学习交流群❤️</u></b></font></a></p> 
<p align="center"><img src="https://img-blog.csdnimg.cn/f7384c88956d4378b72e47548e19c9f8.gif" alt="f7384c88956d4378b72e47548e19c9f8.gif" width="50" /></p>
<p align="center"> <a href="https://gitee.com/haiyongcsdn/haiyong/"><img src="https://img.shields.io/badge/Gitee-%E7%A0%81%E4%BA%91-red" alt="Gitee" /></a> <a href="http://zsysjq.com.cn/store/127"><img src="https://img.shields.io/badge/%E8%87%B4%E7%9F%A5-%E6%B5%B7%E6%8B%A5-9cf" alt="致知店铺" /></a> <a href="https://space.bilibili.com/63551025"><img src="https://img.shields.io/badge/bilibili-%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9-critical" alt="哔哩哔哩" /></a> <a href="https://juejin.cn/user/2040341402229751/"><img src="https://img.shields.io/badge/juejin-%E6%8E%98%E9%87%91-blue.svg" alt="掘金" /></a> <a href="https://github.com/wanghao221/"><img src="https://img.shields.io/badge/GitHub-GitHub-black.svg" alt="GitHub" /></a> <a href="https://www.zhihu.com/people/haiyongblog"><img src="https://img.shields.io/badge/zhihu-%E7%9F%A5%E4%B9%8E-informational" alt="知乎" /></a> </p> 
<p align="center"> <a href="https://haiyong.site/">个人博客</a> | <a href="https://haiyong.blog.csdn.net/">CSDN</a> | <a href="https://juejin.cn/user/2040341402229751">掘金</a> | <a href="https://bbs.huaweicloud.com/community/usersnew/id_1628036118897599">华为云</a> | <a href="https://cloud.tencent.com/developer/user/8932508">腾讯云</a> </p> 
<p align="center"><a href="https://www.captainai.net/haiyong"><font color="#03a9f4"><b><u>❤️人工智能学习网站❤️</u></b></font></a></p> 
<p align="center"><a href="https://lucky.nocode.com/v2/s/89pY7eARALR"><font color="#F08080"><b><u>❤️粉丝抽奖点这里&#xff0c;截止到9月12日❤️</u></b></font><br /><font color="#DA70D6"><b><u>❤️扫码回复抽奖参与❤️</u></b></font> </a></p> 
<img src="https://img-blog.csdnimg.cn/60bf70cc44cc446eb6cee840c5d31e14.gif" alt="20210427214255127.png#pic_center%E2%80%9D" />
<p align="center"> </p>
<p align="center"><a href="https://account.huaweicloud.com/obmgr/invitation/invitation.html?bpName&#61;00000001000000027830B446ECE8AA34A5796666009A2468D201A38E841154814B192FB541876FBD89C34FB49E42DEEC8A2B9F04023924A51EA22D298F2FCEAE7D7A026173C888B7&amp;inviteCode&#61;00000001000000022D75D8D7EC336951DD1BFABA914E3F9BA0C2369E15E3B03AC9ABC8C85D19355D&amp;bindType&#61;1&amp;isDefault&#61;1"><img src="https://img.shields.io/badge/huaweiyun-%E5%8D%8E%E4%B8%BA%E4%BA%91-critical" alt="华为云" /></a></p> 
<p align="center"><font color="#03a9f4"><b>❤️QQ群上传了很多免费资源❤️</b></font> </p> 
<p align="center"> <a href="https://account.huaweicloud.com/obmgr/invitation/invitation.html?bpName&#61;00000001000000027830B446ECE8AA34A5796666009A2468D201A38E841154814B192FB541876FBD89C34FB49E42DEEC8A2B9F04023924A51EA22D298F2FCEAE7D7A026173C888B7&amp;inviteCode&#61;00000001000000022D75D8D7EC336951DD1BFABA914E3F9BA0C2369E15E3B03AC9ABC8C85D19355D&amp;bindType&#61;1&amp;isDefault&#61;1"><b><font color="#DA70D6">❤️华为云全核产品❤️</font></b></a> </p> 
<img src="https://api.daily.dev/devcards/33355122542747d9bae17a8c5ce63b00.png?r&#61;3s1" width="400" alt="Haiyong&#39;s Dev Card" />
<center>
 <b> <font color="#FF0000">★</font> <font color="#FF7F00">大佬友链</font> <font color="#FF0000">☆</font> </b>
</center> 
<center> 
 <b> <u> <a href="https://luciferliu.blog.csdn.net/"> <font color="#9933ff"> Lucifer三思而后行 </font> </a></u></b>
</center> 
<center> 
 <b> <u> <a href="http://haiyong.site"> <font color="#8470FF">haiyong 海拥</font></a></u></b>
</center> 
<center> 
 <b> <u><a href="https://www.captainai.net/haiyong"><font color="#03a9f4"><u>人工智能学习</u></font></a></u></b>
</center>
    </div>
</div>

<div id="asideHotArticle" class="aside-box">
	<h3 class="aside-title">热门文章</h3>
	<div class="aside-content">
		<ul class="hotArticle-list">
			<li>
				<a href="https://haiyong.blog.csdn.net/article/details/119079126" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://haiyong.blog.csdn.net/article/details/119079126","ab":"new"}'>
				使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					<span class="read">39824</span>
                </a>
			</li>
			<li>
				<a href="https://haiyong.blog.csdn.net/article/details/118487938" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://haiyong.blog.csdn.net/article/details/118487938","ab":"new"}'>
				你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					<span class="read">34318</span>
                </a>
			</li>
			<li>
				<a href="https://haiyong.blog.csdn.net/article/details/119724717" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://haiyong.blog.csdn.net/article/details/119724717","ab":"new"}'>
				❤️使用 HTML、CSS 和 JavaScript 的简单模拟时钟❤️
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					<span class="read">28788</span>
                </a>
			</li>
			<li>
				<a href="https://haiyong.blog.csdn.net/article/details/118751389" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://haiyong.blog.csdn.net/article/details/118751389","ab":"new"}'>
				CSS 很神奇，是时候尝试 3D 了
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					<span class="read">25323</span>
                </a>
			</li>
			<li>
				<a href="https://haiyong.blog.csdn.net/article/details/117886469" target="_blank"  data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://haiyong.blog.csdn.net/article/details/117886469","ab":"new"}'>
				提高代码效率的 20 个JavaScript 技巧和窍门
					<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountBlack.png" alt="">
					<span class="read">23155</span>
                </a>
			</li>
		</ul>
	</div>
</div>
<div id="asideCategory" class="aside-box flexible-box">
    <h3 class="aside-title">分类专栏</h3>
    <div class="aside-content">
        <ul>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11292649.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11292649.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210817141510711.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">前端优质项目</span>
                        <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                    </span>
                    <span class="count float-right">26篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11292628.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11292628.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210817140746376.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">超原力计划</span>
                        <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                    </span>
                    <span class="count float-right">19篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11177498.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11177498.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/2021071309101282.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">Java练习题</span>
                        <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                    </span>
                    <span class="count float-right">9篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11087920.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11087920.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210610140300175.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">SEO进阶</span>
                        <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                    </span>
                    <span class="count float-right">23篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11256652.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11256652.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210803085626574.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">Python实战项目</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11289568.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11289568.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210816113410370.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">新原力计划</span>
                    </span>
                    <span class="count float-right">6篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11218703.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11218703.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210719105719400.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">python核心知识点整理</span>
                    </span>
                    <span class="count float-right">4篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11127556.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11127556.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210610134147947.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">新星计划</span>
                    </span>
                    <span class="count float-right">14篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11200292.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11200292.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210713090920825.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">Java核心知识点整理</span>
                    </span>
                    <span class="count float-right">3篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10383276.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10383276.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524164819651.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">SEO基础</span>
                    </span>
                    <span class="count float-right">15篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10819147.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10819147.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524165939437.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">JavaScript</span>
                    </span>
                    <span class="count float-right">22篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10665839.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10665839.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524162044752.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">游戏开发中的物理</span>
                    </span>
                    <span class="count float-right">9篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10648558.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10648558.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/2021052416215967.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">游戏开发中的数学</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10151060.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10151060.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524165716769.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">Java</span>
                    </span>
                    <span class="count float-right">51篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10837900.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10837900.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210521135846109.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">响应式</span>
                    </span>
                    <span class="count float-right">16篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10639191.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10639191.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/2021052417020944.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">前端练习demo</span>
                    </span>
                    <span class="count float-right">19篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11167920.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11167920.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210629143551649.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">C++</span>
                    </span>
                    <span class="count float-right">1篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10648554.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10648554.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524161353721.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">游戏</span>
                    </span>
                    <span class="count float-right">31篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11118788.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11118788.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210607105937853.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">数据结构和算法</span>
                    </span>
                    <span class="count float-right">4篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10232485.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10232485.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524160504644.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">web前端(免费)</span>
                    </span>
                    <span class="count float-right">46篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11084798.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11084798.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/2021052416015586.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">Linux</span>
                    </span>
                    <span class="count float-right">2篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11065621.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11065621.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524160531469.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">网站模板</span>
                    </span>
                    <span class="count float-right">7篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10849183.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10849183.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524160815592.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">PHP</span>
                    </span>
                    <span class="count float-right">3篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_9984543.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_9984543.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210521141503315.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">问题解决</span>
                    </span>
                    <span class="count float-right">8篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_9951082.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_9951082.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524161613272.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">好玩</span>
                    </span>
                    <span class="count float-right">30篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10161673.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10161673.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524161844325.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">区别</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10057293.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10057293.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524164424674.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">试题集</span>
                    </span>
                    <span class="count float-right">14篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10606279.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10606279.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524165032823.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">黑帽SEO</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10634480.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10634480.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524164840120.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">Google</span>
                    </span>
                    <span class="count float-right">13篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_9978837.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_9978837.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210521133152638.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">数据库</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10657531.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10657531.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524162353611.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">新闻</span>
                    </span>
                    <span class="count float-right">3篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10348614.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10348614.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524162605147.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">密码学</span>
                    </span>
                    <span class="count float-right">11篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10300327.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10300327.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210521133513757.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">微信小程序</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
            <li class="">
                <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10789841.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10789841.html","ab":"new"}'>
                    <img src="https://img-blog.csdnimg.cn/20210524170947369.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                    <span class="title oneline">
                        <span class="text">工具</span>
                    </span>
                    <span class="count float-right">5篇</span>
                </a>
            </li>
        </ul>
    </div>
    <p class="text-center">
        <a class="flexible-btn" data-fbox="aside-archive"><img class="look-more" src="https://csdnimg.cn/release/blogv2/dist/pc/img/arrowDownBlack.png" alt=""></a>
    </p>
</div>
<div id="asideNewComments" class="aside-box">
    <h3 class="aside-title">最新评论</h3>
    <div class="aside-content">
        <ul class="newcomment-list">
            <li>
                <a class="title text-truncate" target="_blank" href="https://haiyong.blog.csdn.net/article/details/120321169#comments_18346611" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346611","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346611","ab":"new"}'>❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️</a>
                <p class="comment ellipsis">
                    <a href="https://haiyong.blog.csdn.net" class="user-name" target="_blank">海拥✘: </a>
                    <span class="code-comments">这资源审核经常这样，有时候要等好久才通过，我现在电脑不在身边，没法跟客服反馈</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://haiyong.blog.csdn.net/article/details/120321169#comments_18346593" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346593","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346593","ab":"new"}'>❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️</a>
                <p class="comment ellipsis">
                    <a href="https://haiyong.blog.csdn.net" class="user-name" target="_blank">海拥✘: </a>
                    <span class="code-comments">加我微信wh18363</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://haiyong.blog.csdn.net/article/details/120321169#comments_18346356" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346356","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346356","ab":"new"}'>❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/m0_52155263" class="user-name" target="_blank">iheanu_: </a>
                    <span class="code-comments">源码下不了啊</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://haiyong.blog.csdn.net/article/details/120321169#comments_18346133" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346133","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18346133","ab":"new"}'>❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/weixin_45629285" class="user-name" target="_blank">林深时不见鹿: </a>
                    <span class="code-comments">学到了</span>
                </p>
            </li>
            <li>
                <a class="title text-truncate" target="_blank" href="https://haiyong.blog.csdn.net/article/details/120321169#comments_18345820" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18345820","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://haiyong.blog.csdn.net/article/details/120321169#comments_18345820","ab":"new"}'>❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️</a>
                <p class="comment ellipsis">
                    <a href="https://blog.csdn.net/paradoxaaa_" class="user-name" target="_blank">paradoxaaa_: </a>
                    <span class="code-comments"><img src="https://g.csdnimg.cn/static/face/emoji/005.png" alt='表情包' ><img src="https://g.csdnimg.cn/static/face/emoji/005.png" alt='表情包' ><img src="https://g.csdnimg.cn/static/face/emoji/005.png" alt='表情包' ></span>
                </p>
            </li>
        </ul>
    </div>
</div>
<div id="asideNewNps" class="aside-box">
    <h3 class="aside-title">您愿意向朋友推荐“博客详情页”吗？</h3>
    <div class="aside-content">
        <ul class="newnps-list">
            <li class="newnps-item" data-type="强烈不推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey1.png" alt="">
                </div>
                <div class="newnps-text">强烈不推荐</div>
            </li>
            <li class="newnps-item" data-type="不推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel2.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey2.png" alt="">
                </div>
                <div class="newnps-text">不推荐</div>
            </li>
            <li class="newnps-item" data-type="一般般">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel3.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey3.png" alt="">
                </div>
                <div class="newnps-text">一般般</div>
            </li>
            <li class="newnps-item" data-type="推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel4.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey4.png" alt="">
                </div>
                <div class="newnps-text">推荐</div>
            </li>
            <li class="newnps-item" data-type="强烈推荐">
                <div class="newnps-img-box">
                    <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png" alt="">
                    <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey5.png" alt="">
                </div>
                <div class="newnps-text">强烈推荐</div>
            </li>
        </ul>
        <div class="newnps-form-box">
        <div class="newnps-form">
            <input type="text" placeholder="请输入建议或反馈后点击提交" class="newnps-input">
            <span class="newnps-btn">提交</span>
        </div>
        </div>
    </div>
</div>
<div id="asideArchive" class="aside-box" style="display:block!important; width:300px;">
    <h3 class="aside-title">最新文章</h3>
    <div class="aside-content">
        <ul class="inf_list clearfix">
            <li class="clearfix">
            <a href="https://haiyong.blog.csdn.net/article/details/120321169" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://haiyong.blog.csdn.net/article/details/120321169","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://haiyong.blog.csdn.net/article/details/120321169","ab":"new"}'>❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️</a>
            </li>
            <li class="clearfix">
            <a href="https://haiyong.blog.csdn.net/article/details/120287948" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://haiyong.blog.csdn.net/article/details/120287948","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://haiyong.blog.csdn.net/article/details/120287948","ab":"new"}'>【Python编程基础】控制流之链式比较运算符</a>
            </li>
            <li class="clearfix">
            <a href="https://haiyong.blog.csdn.net/article/details/120203399" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://haiyong.blog.csdn.net/article/details/120203399","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://haiyong.blog.csdn.net/article/details/120203399","ab":"new"}'>❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️</a>
            </li>
        </ul>
        <div class="archive-bar"></div>
        <div class="archive-box">
                <div class="archive-title">2021</div> 
                <div class="archive-content">
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/09" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/09"}'>
                        <span class="time">09月</span>
                        <span class="count">8篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/08" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/08"}'>
                        <span class="time">08月</span>
                        <span class="count">12篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/07" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/07"}'>
                        <span class="time">07月</span>
                        <span class="count">17篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/06" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/06"}'>
                        <span class="time">06月</span>
                        <span class="count">18篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/05" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/05"}'>
                        <span class="time">05月</span>
                        <span class="count">10篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/04" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/04"}'>
                        <span class="time">04月</span>
                        <span class="count">8篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/03" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/03"}'>
                        <span class="time">03月</span>
                        <span class="count">14篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/02" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/02"}'>
                        <span class="time">02月</span>
                        <span class="count">21篇</span>
                        </a>
                    </div>
                    <div class="archive-item">
                        <a href="https://haiyong.blog.csdn.net/article/month/2021/01" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://haiyong.blog.csdn.net/article/month/2021/01"}'>
                        <span class="time">01月</span>
                        <span class="count">27篇</span>
                        </a>
                    </div>
                </div>
                <div class="archive-list-item"><a href="https://haiyong.blog.csdn.net/article/month/2020/12" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":""}'><span class="year">2020年</span><span class="num">157篇</span></a></div>
        </div>
    </div>
</div>
	<div id="footerRightAds" class="isShowFooterAds">
		<div class="aside-box">
			<div id="kp_box_57" data-pid="57"><iframe  src="https://kunpeng-sc.csdnimg.cn/?timestamp=1623163941/#/preview/7965?positionId=57&queryWord=&spm=1001.2101.3001.5001" frameborder="0" width= "300px"  height= "600px" scrolling="no" ></iframe><img class="pre-img-lasy"  data-src="https://kunyu.csdn.net/1.png?p=57&a=4725&c=7965&k=&spm=1001.2101.3001.5001&d=1&t=3&u=d4daaa219d02475d85f38fba8cb3c779" style="display: block;width: 0px;height: 0px;"></div>
		</div>
	</div>
    <!-- 详情页显示目录 -->
<!--文章目录-->
<div id="asidedirectory" class="aside-box">
    <div class='groupfile' id="directory">
        <h3 class="aside-title">目录</h3>
        <div class="align-items-stretch group_item">
            <div class="pos-box">
            <div class="scroll-box">
                <div class="toc-box"></div>
            </div>
            </div>
        </div>
    </div>
</div>
</aside>
<script>
	$("a.flexible-btn").click(function(){
		$(this).parents('div.aside-box').removeClass('flexible-box');
		$(this).parents("p.text-center").remove();
	})
</script>
<script type="text/javascript"  src="https://g.csdnimg.cn/user-tooltip/2.5/user-tooltip.js"></script>
<script type="text/javascript"  src="https://g.csdnimg.cn/user-medal/1.0.7/user-medal.js"></script>    </div>
<div class="recommend-right  align-items-stretch clearfix" id="rightAside" data-type="recommend">
    <aside class="recommend-right_aside">
        <div id="recommend-right" >
                        <div class='flex-column aside-box groupfile' id="groupfile">
                <div class="groupfile-div">
                <h3 class="aside-title">目录</h3>
                <div class="align-items-stretch group_item">
                    <div class="pos-box">
                        <div class="scroll-box">
                            <div class="toc-box"></div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
                <div id="recommendAdBox">
                    <div id="kp_box_479" data-pid="479"><iframe  src="https://kunpeng-sc.csdnimg.cn/?timestamp=1623163941/#/preview/7965?positionId=479&queryWord=&spm=1001.2101.3001.4834" frameborder="0" width= "300px"  height= "600px" scrolling="no" ></iframe><img class="pre-img-lasy"  data-src="https://kunyu.csdn.net/1.png?p=479&a=4725&c=7965&k=&spm=1001.2101.3001.4834&d=1&t=3&u=516193768a9b4333b8c3bc3c73a4db1e" style="display: block;width: 0px;height: 0px;"></div>
                </div>
            <div class='aside-box kind_person d-flex flex-column'>
                    <h3 class="aside-title">分类专栏</h3>
                    <div class="align-items-stretch kindof_item" id="kind_person_column">
                        <div class="aside-content">
                            <ul>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11292649.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11292649.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210817141510711.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">前端优质项目</span>
                                            <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                                        </span>
                                        <span class="count float-right">26篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11292628.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11292628.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210817140746376.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">超原力计划</span>
                                            <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                                        </span>
                                        <span class="count float-right">19篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11177498.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11177498.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/2021071309101282.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">Java练习题</span>
                                            <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                                        </span>
                                        <span class="count float-right">9篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11087920.html" data-report-click='{"mod":"popu_826","spm":"1001.2101.3001.4230","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11087920.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210610140300175.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">SEO进阶</span>
                                            <img class="tip" src="https://csdnimg.cn/release/blogv2/dist/pc/img/payMoney.png" alt="">
                                        </span>
                                        <span class="count float-right">23篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11256652.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11256652.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210803085626574.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">Python实战项目</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11289568.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11289568.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210816113410370.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">新原力计划</span>
                                        </span>
                                        <span class="count float-right">6篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11218703.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11218703.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210719105719400.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">python核心知识点整理</span>
                                        </span>
                                        <span class="count float-right">4篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11127556.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11127556.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210610134147947.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">新星计划</span>
                                        </span>
                                        <span class="count float-right">14篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11200292.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11200292.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210713090920825.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">Java核心知识点整理</span>
                                        </span>
                                        <span class="count float-right">3篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10383276.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10383276.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524164819651.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">SEO基础</span>
                                        </span>
                                        <span class="count float-right">15篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10819147.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10819147.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524165939437.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">JavaScript</span>
                                        </span>
                                        <span class="count float-right">22篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10665839.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10665839.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524162044752.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">游戏开发中的物理</span>
                                        </span>
                                        <span class="count float-right">9篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10648558.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10648558.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/2021052416215967.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">游戏开发中的数学</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10151060.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10151060.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524165716769.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">Java</span>
                                        </span>
                                        <span class="count float-right">51篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10837900.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10837900.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210521135846109.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">响应式</span>
                                        </span>
                                        <span class="count float-right">16篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10639191.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10639191.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/2021052417020944.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">前端练习demo</span>
                                        </span>
                                        <span class="count float-right">19篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11167920.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11167920.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210629143551649.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">C++</span>
                                        </span>
                                        <span class="count float-right">1篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10648554.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10648554.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524161353721.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">游戏</span>
                                        </span>
                                        <span class="count float-right">31篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11118788.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11118788.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210607105937853.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">数据结构和算法</span>
                                        </span>
                                        <span class="count float-right">4篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10232485.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10232485.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524160504644.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">web前端(免费)</span>
                                        </span>
                                        <span class="count float-right">46篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11084798.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11084798.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/2021052416015586.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">Linux</span>
                                        </span>
                                        <span class="count float-right">2篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_11065621.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_11065621.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524160531469.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">网站模板</span>
                                        </span>
                                        <span class="count float-right">7篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10849183.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10849183.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524160815592.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">PHP</span>
                                        </span>
                                        <span class="count float-right">3篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_9984543.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_9984543.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210521141503315.jpg?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">问题解决</span>
                                        </span>
                                        <span class="count float-right">8篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_9951082.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_9951082.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524161613272.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">好玩</span>
                                        </span>
                                        <span class="count float-right">30篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10161673.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10161673.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524161844325.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">区别</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10057293.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10057293.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524164424674.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">试题集</span>
                                        </span>
                                        <span class="count float-right">14篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10606279.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10606279.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524165032823.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">黑帽SEO</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10634480.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10634480.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524164840120.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">Google</span>
                                        </span>
                                        <span class="count float-right">13篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_9978837.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_9978837.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210521133152638.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">数据库</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10657531.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10657531.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524162353611.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">新闻</span>
                                        </span>
                                        <span class="count float-right">3篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10348614.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10348614.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524162605147.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">密码学</span>
                                        </span>
                                        <span class="count float-right">11篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10300327.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10300327.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210521133513757.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">微信小程序</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                                <li class="">
                                    <a class="clearfix" target="_blank" href="https://blog.csdn.net/qq_44273429/category_10789841.html" data-report-click='{"mod":"popu_537","spm":"1001.2101.3001.4137","strategy":"pc付费专栏左侧入口","dest":"https://blog.csdn.net/qq_44273429/category_10789841.html","ab":"new"}'>
                                        <img src="https://img-blog.csdnimg.cn/20210524170947369.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="" onerror="this.src='https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64'">
                                        <span class="title oneline">
                                            <span class="text">工具</span>
                                        </span>
                                        <span class="count float-right">5篇</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </aside>
</div>

</div>
<div class="mask-dark"></div>
<script type="text/javascript">
    var timert = setInterval(function(){
      sideToolbar = $(".csdn-side-toolbar");
      if (sideToolbar.length > 0) {
        sideToolbar.css('cssText','bottom:64px !important;')
        clearInterval(timert);
      }
    }, 200);
</script>
<script>
    var articleId = 120263267;
    var commentscount = 65;
    var curentUrl = "https://blog.csdn.net/qq_44273429/article/details/120263267";
    var myUrl = "https://my.csdn.net/";
    var highlight = ["css","完整","❤","html5","免费","音乐播放器","js","含","️","播放器","创建","在线音乐","html","源码"];//高亮数组
    var isRecommendModule = true;
    var isBaiduPre = true;
    var baiduCount = 2;
    var share_card_url = "https://blog.csdn.net/qq_44273429/article/shareArticleCardPage?article_id=120263267"
	var articleType = 1;
    var baiduKey = "❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️";
    var userNewReport = false;
    var needInsertBaidu = true;
    var recommendRegularDomainArr = ["blog.csdn.net/.+/article/details/","download.csdn.net/download/","edu.csdn.net/course/detail/","ask.csdn.net/questions/","bbs.csdn.net/topics/","www.csdn.net/gather_.+/"]
    var codeStyle = "tomorrow-night";
    var baiduSearchType = "title";
    var canRead = true;
    var blogMoveHomeArticle = false;
    var showPcWindowAd = false;
    var showSearchText = "";
    var linkPage = true;
    var articleSource = 1;
    var articleReport = '{"pid": "blog", "spm":"1001.2101"}';
    var isShowToQuestion = false;
    var baiduSearchChannel = 'pc_relevant'
    var baiduSearchIdentification = '.no_search_link'
    var initRewardObject = {
        giver: currentUserName,
        anchor: username,
        articleId: articleId,
        sign: ''
    }
</script>
<script src="https://csdnimg.cn/public/sandalstrap/1.4/js/sandalstrap.min.js"></script>
<div class="skin-boxshadow"></div>
<div class="directory-boxshadow"></div>
<div class="pay-code">
    <div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div>
    <div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div>
    <div class="content-code">
    <div id="payCode" data-id="">
            <div class="renovate">
                <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png">
                <span>点击重新获取</span>
            </div>
        </div>
        <div class="pay-style"><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div>
    </div>
    <div class="bt-close"><svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"><defs><style type="text/css"></style></defs><path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path></svg></div>
    <!-- <p style="margin-top: 8px;font-size: 14px;" class="text-center">支付成功即可阅读</p> -->
    <div class="pay-balance">
    <input type="radio" class="pay-code-radio" data-type="details"> 
    <span class="span">钱包余额</span>
    <span class="balance" style="color:#FC5531;font-size:14px;">0</span>  
    <div class="pay-code-tile">
        <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt="">
        <div class="pay-code-content">
            <div class="span">
                <p class="title">抵扣说明：</p>
                <p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。</p>
            </div>
        </div>
    </div>
    </div>
    <a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span  >余额充值</span></a>
</div>
<div style="display:none;">
	<img src="" onerror='setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'>
</div>
</body>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_highlight-db1e81323a.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_common-6a9acd4c62.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/components/js/edit_copy_code-1320dfe85c.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/tomorrow-night.css">
<script>
 // 全局声明
 if (window.csdn === undefined) {
      window.csdn = {};
    }
    window.csdn.sideToolbar = {
        options: {
            report:{
                isShow: true,
            },
            qr: {
                isShow: false,
            },
            guide: {
                isShow: true
            }
        }
    }
    $(function(){
        $(document).on('click',"a.option-box[data-type='report']",function() {
            window.csdn.userLogin.loadAjax(function(res){
                if(userNewReport){
                    showReportNew(false,articleTitles);
                }else{
                    showReport(false,articleTitles);
                }
            })
        });
    })
</script>
    <script src="https://g.csdnimg.cn/baidu-search/1.0.9/baidu-search.js"  type="text/javascript"></script>
<script src="https://csdnimg.cn/release/download/old_static/js/qrcode.js"></script>
<script src="https://g.csdnimg.cn/lib/qrcode/1.0.0/qrcode.min.js"></script>
<script src="https://g.csdnimg.cn/user-ordercart/2.0.6/user-ordercart.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/user-ordertip/4.1.3/user-ordertip.js" type="text/javascript" ></script>
<script src="https://csdnimg.cn/release/blogv2/dist/pc/js/common-24fa4dcb20.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/pc/js/detail-44f0825236.min.js" type="text/javascript"></script>
<script src="https://csdnimg.cn/release/blogv2/dist/pc/js/column-8eca907613.min.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/side-toolbar/3.0/side-toolbar.js" type="text/javascript"></script>
<script>
window.csdn.extensionBox = window.csdn.extensionBox ? window.csdn.extensionBox : {};
window.csdn.extensionBox.extensionBoxParams = {
    inited: function () {
    var extensionBox = document.getElementById('blogExtensionBox'); // 位置dom元素
    window.csdn.extensionBox.show({
        isdark:true, // 是否黑皮肤
        voteusername: "qq_44273429",
        posDom: extensionBox, // 插入位置 selectorString || 位置dom元素
        codyFn:()=>{
        //复制成功回调函数
            showToast({
                text: '复制成功!',
                bottom: '10%', //toast距离页面底部的距离
                zindex: 9000, //为了防止被其他控件遮盖，z-index默认为2
                speed: 500, //toast的显示速度
                time: 1500//toast显示多久以后消失
            });
        }
    });
    }
}
</script>
<script src="https://g.csdnimg.cn/extension-box/1.1.3/extension-box.js" type="text/javascript"></script>
<script src="https://g.csdnimg.cn/copyright/1.0.4/copyright.js" type="text/javascript"></script>
<script>
    $(".MathJax").remove();
    if ($('div.markdown_views pre.prettyprint code.hljs').length > 0) {
        $('div.markdown_views')[0].className = 'markdown_views';
    }
</script>
<script type="text/javascript" src="https://csdnimg.cn/release/blog_mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            "HTML-CSS": {
                    linebreaks: { automatic: true, width: "94%container" },
                    imageFont: null
            },
            tex2jax: {
                preview: "none",
                ignoreClass:"title-article"
            },
            mml2jax: {
                preview: 'none'
            }
    });
</script>
<script type="text/javascript" crossorigin src="https://g.csdnimg.cn/login-box/1.1.7/login-box.js"></script></html>
